﻿@{
    Layout = null;
    string openid = ViewBag.openid;
    string weixinId = ViewBag.weixinId;
}
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>签到02</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <script src="~/js/jquery.js"></script>
    @*关于微信端的配置*@
    <script>
        var AppId = "@ViewBag.appid";
        var AppSercret = "@ViewBag.appsecret";
        var timestamp = "@ViewBag.timestamp";
        var nonceStr = "@ViewBag.nonceStr";
        var signature = "@ViewBag.signature";
    </script>
    <script src="~/js/jweixin-1.0.0.js"></script>
    <script src="@Url.Content("~/js/DailyTaskCommon.js")?a=@(new Random().Next())"></script>
    <link href="@Url.Content("~/css/DailyTask/basic.css")?a=@(new Random().Next())" rel="stylesheet" />
    <script>
        (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth < 768 ? docEl.clientWidth : 768; if (!clientWidth) return; docEl.style.fontSize = 16 * (clientWidth / 320) + 'px'; }; recalc(); if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); })(document, window);
    </script>
</head>
<body>
    <div class="box">
        <header class="header">
            <dl>
                <dt>
                    <h3>
                        <img src="~/images/DailyTask/img.jpg" id="headimg" /></h3>
                    <p>昵称:<span id="nickName"></span></p>
                </dt>
                <dd>
                    <p><b id="lxqdts">0</b><span>连续签到天数</span></p>
                    <p><b id="qdzts">0</b><span>总签到天数</span></p>
                </dd>
            </dl>
        </header>
        <!--日历-->
        <div class="calendar">
            <div class="calendar_top">
                <a href="javascript:void(0)" id="aPrevMonth">
                    <img src="~/images/DailyTask/calendar_img01.jpg" /></a>
                <span id="currYM">2015年10月</span>
                <a href="javascript:void(0)" id="aNextMonth">
                    <img src="~/images/DailyTask/calendar_img02.jpg" /></a>
            </div>
            <div class="calendar_content">
                <p><span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span></p>
                <div id="divDays">
                    @*                <span>12</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span>
                    <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span>
                    <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span>
                    <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span>
                    <span class="qd_calendar">1</span><span class="qd_calendar">2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span>*@
                </div>
            </div>
        </div>
        <!--日历 end-->
    </div>

</body>
</html>

<script type="text/javascript">

    var currYear;  //当前的年份
    var currMonth; //当前的月份
    var currDay;   //当前的日期
    var signedDate = [];// 用来存储所有签到日子
    var userName;
    var img;
    var consecutive = 0;
    var signCount = 0;
    var date = new Date();
    currYear = date.getFullYear();
    currMonth = date.getMonth() + 1;
    currDay = date.getDate();



    // 给定年月获取当月天数  
    function getMonthDays(y, m) {
        var mday = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
        if ((y % 4 == 0 && y % 100 != 0) || y % 400 == 0)//判断是否是闰月
            mday[1] = 29;
        return mday[m - 1];
    }

    //根据年月日的到时星期几 
    function weekNumber(y, m, d) {
        var wk;
        if (m <= 12 && m >= 1) {
            for (var i = 1; i < m; ++i) {
                d += getMonthDays(y, i);
            }
        }
        /*根据日期计算星期的公式*/
        wk = (y - 1 + (y - 1) / 4 - (y - 1) / 100 + (y - 1) / 400 + d) % 7;
        //0对应星期天，1对应星期一 
        return parseInt(wk);
    }
    //画出日历
    function draw() {

        $("#lxqdts").text(consecutive);
        $("#qdzts").text(signCount);
        $("#currYM").text(currYear + "年" + currMonth + "月");
        $("#headimg").prop("src", img);
        $("#nickName").text(userName);

        var prevMonth = currMonth - 1;
        var prevMonthOfYear = currYear;  //上一个月所在的年份
        if (prevMonth < 1) {            //上一个月如果小于1，那么说明是去年的十二月
            prevMonth = 12;
            prevMonthOfYear = currYear - 1;
        }

        var nextMonth = currMonth + 1;
        var nextMonthOfYear = currYear;  //下一个月所在的年份
        if (nextMonth > 12) {            //下一个月如果大于12，那么说明是明年的1月
            nextMonth = 1;
            nextMonthOfYear = currYear + 1;
        }

        var firstDayOfMonthAtWeekDay = weekNumber(currYear, currMonth, 1);    //求出当前月的第一天是星期几
        var CurrMonthDays = getMonthDays(currYear, currMonth);                           //当月有多少天
        var prevMonthDays = getMonthDays(prevMonthOfYear, prevMonth);   //上月有多少天
        var htmlStr = "";
        var sumGz = 0;  //记录已经所占的格子
        var sgyGz = 0;
        if (firstDayOfMonthAtWeekDay == 0) {  //如果本月第一天为周日，则显示上个月一周的日期
            sgyGz = 7;
        } else {                             //否则只填补 前面几个日期 
            sgyGz = firstDayOfMonthAtWeekDay;
        }
        //循环上个月的所占的格子
        for (var i = prevMonthDays - sgyGz + 1; i <= prevMonthDays; i++) {

            var strDate = fomartDate(prevMonthOfYear, prevMonth, i);
            var isSign = isSigned(strDate);
            htmlStr += "<span " + (isSign ? "class='qd_calendar'" : "") + "  date='" + strDate + "'>" + i + "</span>";
            sumGz++;
        }

        //循环当前月所占的格子
        for (var i = 1; i <= CurrMonthDays; i++) {

            var strDate = fomartDate(currYear, currMonth, i);
            var isSign = isSigned(strDate);
            htmlStr += "<span " + (isSign ? "class='qd_calendar'" : "") + "  date='" + strDate + "'>" + i + "</span>";
            sumGz++;
        }

        //循环下个月所占的个子
        for (var i = 1; i <= 42 - sumGz; i++) {

            var strDate = fomartDate(nextMonthOfYear, nextMonth, i);
            var isSign = isSigned(strDate);
            htmlStr += "<span " + (isSign ? "class='qd_calendar'" : "") + " date='" + strDate + "'>" + i + "</span>";
        }
        $("#divDays").html(htmlStr);
    }
    // draw();

    //传入日期判断是否当天有签到
    function isSigned(strDate) {
        for (var i = 0; i < signedDate.length; i++) {
            if (strDate == signedDate[i]) {
                return true;
                break;
            }
        }
        return false;
    }
    ///点击的是否是今天
    function getTodayFormartDate() {
        var rcurrYear;  //当前的年份
        var rcurrMonth; //当前的月份
        var rcurrDay;   //当前的日期
        var date = new Date();
        rcurrYear = date.getFullYear();
        rcurrMonth = date.getMonth() + 1;
        rcurrDay = date.getDate();
        return fomartDate(rcurrYear, rcurrMonth, rcurrDay);
    }

    //根据年月日，将日期转换为yyyy-mm-dd
    function fomartDate(y, m, d) {
        return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d);
    }


    //当点击上一个月的时候执行
    document.getElementById("aPrevMonth").onclick = function () {
        var prevMonth = currMonth - 1;
        var prevMonthOfYear = currYear;  //上一个月所在的年份
        if (prevMonth < 1) {            //上一个月如果小于1，那么说明是去年的十二月
            prevMonth = 12;
            prevMonthOfYear = currYear - 1;
        }
        currMonth = prevMonth;
        currYear = prevMonthOfYear;
        draw();
    }

    //当点击下一个月的时候执行
    document.getElementById("aNextMonth").onclick = function () {
        var nextMonth = currMonth + 1;
        var nextMonthOfYear = currYear;  //下一个月所在的年份
        if (nextMonth > 12) {            //上一个月如果小于1，那么说明是去年的十二月
            nextMonth = 1;
            nextMonthOfYear = currYear + 1;
        }
        currMonth = nextMonth;
        currYear = nextMonthOfYear;
        draw();
    }

@*    $("body").on("click", "#divDays span", function () {
        var $theObj = $(this);
        var clickDate = $theObj.attr("date");
        if (clickDate == getTodayFormartDate())  //只有点击的是今天才能算签到
        {
            if (!$(this).hasClass("qd_calendar"))//并且当天没有进行签到
            {
                $.post("@Url.Action("DoSign", "DailyTask")", { openid: '@openid' }, function (data) {
                if (data == "1") {
                    $theObj.addClass("qd_calendar");
                }
            });
        }
    }
    });*@

    $("#divDays").click(function () {
        var spans = $("#divDays span");
        var todayStr = getTodayFormartDate();
        for (var i = 0; i < spans.length; i++) {
            var $obj = $(spans[i]);
            if ($obj.attr("date") == todayStr) {
                if (!$obj.hasClass("qd_calendar")) {
                    $.post("@Url.Action("DoSign", "DailyTask")", { openid: '@openid',weixinId:'@weixinId' }, function (data) {
                    if (data == "1") {
                        $obj.addClass("qd_calendar");
                        signedDate.push(todayStr);
                        //连续签到天数+1
                        signCount++;
                        consecutive++;
                        $("#lxqdts").text(consecutive);
                        $("#qdzts").text(signCount);
                    }
                });
            }
            break;
        }
    }

});

//获取签到的数据
function getSignData() {
    $.ajax({
        url: '@Url.Action("GetSignedDateByOpenid", "DailyTask")',
        data: { openid: '@openid' },
        type: 'post',
        dataType: 'json',
        success: function (data) {
            signCount = data.SignCount;
            consecutive = data.lxQd;
            signedDate = data.list;
            userName = data.userName;
            img = data.img;
            draw();
        }
    });

}
$(function () {
    getSignData();
});
</script>
